<template>
  <div id="container" :style ="note">
    <div class="login">
      <el-form :model="login" ref="loginForm" label-width="70px" class="login-box">
        <h1>医院信息管理系统</h1>
        <el-form-item

          label="账号"
          prop="username"
          :rules="[{ required: true, message: '账号不可为空', trigger: 'blur' }]"
        >
          <el-input v-model="login.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[{ required: true, message: '密码不可为空', trigger: 'blur' }]"
        >
          <el-input type="password" v-model="login.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {login} from "@/api/user.js"
import {setToken} from '@/utils/localStorage.js'
export default {
  name: "",
  data() {
    return {
      login: {},
       note: {
            backgroundImage: "url(" + require("../../public/images/timg.jpg") + ")",
            backgroundRepeat: "no-repeat",
            backgroundSize: "100% auto",
            margin:"0px auto",
//
          },
    };

  },
  methods: {
    onSubmit() {
       this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          login(this.login).then(response=>{
            console.log(response.data)
            if(response.data.code==="0000"){
              setToken(response.data.data.token);
              this.$router.push("/");
            }else{
              this.$message.error('用户名密码错误！');
            }
          });
          // api调用
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      console.log("123")
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
// #container {
//   height: 100%;
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }
// .login {
//   width: 380px;
//   //   background-color: red;
//   text-align: center;
//   padding-right: 30px;
//   border: 2px black;
// }
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 180px auto;
  // margin-left: 180px;
  // margin-top: 180px;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  text-align: center;
}
</style>